<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="">
<meta http-equiv="x-dns-prefetch-control" content="on">
<title>旅程详情 - 删除好友</title>
<link rel="stylesheet" href="../imgv2/css/default.min.css" />
<link href="../imgv2/css/css.css" rel="stylesheet" type="text/css">
<style>
body{
overflow:auto;}
.friends-count {
	margin-left: 3px;
	margin-right: 3px;
}
.friends-list {
	margin-top: 2px;
	margin-bottom: 2px;
	/*height: 140px;
	overflow-y: auto;*/
}</style>
</head>

<body class="whitebg">
<!--wrap start-->
<section id="wrap">
    <section class="detailtitlebar">
          <img src="../imgv2/user_pic.png" width="100%" height="100%" class="tripuser photo-img"/>
          <ul class="listitem h120">
              <li class="userinfo">
                  <p class="username"><em
						id="owner-name">永远的永远</em> 创建的</p>
                  <p class="status_blue blueline">旅程进行中</p>
              </li>
              <li class="d_triptitle"><em id="trip-title"></em></li>
          </ul>
    </section>    
    <section class="subtitle">旅程时间</section>
    <section class="citylist whitebg">
          <ul class="listitem h120 bottomline">
              <li class="infoname">
                  <p class="peoplenumber">开始时间</p>
              </li>
              <li class="infocon" data-column="starttime" id="txtJourneyStartTime">2015/4/30</li>
          </ul>
          <ul class="listitem h120 bottomline">
              <li class="infoname">
                  <p class="peoplenumber">结束时间</p>
              </li>
              <li class="infocon" data-column="endtime" id="txtJourneyEndTime">2015/4/30</li>
          </ul>
    </section>
    <section class="subtitle">目的地</section>
    <section class="lh3 citylist whitebg">
         <ul class="listitem bottomline">
              <li class="itemico mtb"><i class="iconfont">&#xe606;</i></li>
              <li class="itemcon_h mtb"><a href="javascript:void(0);" data-column="destination" id="txtJourneyDestination">人民广场(东门)</a></li>
             <!-- <li class="itemarrow mtb"><i class="iconfont">&#xe619;</i></li> --> 
         </ul>
    </section>
    <section class="citylist">
         <ul class="listitem h60 mt20">
              <button class="smallbtn left button" id="btnChangeJourney" onClick="this.className='button_d smallbtn left'" onmouseout="this.className='smallbtn left button'">修改旅程</button>
              <button class="smallbtn right button" id="btnEndJourney" onClick="this.className='button_d smallbtn right'" onmouseout="this.className='smallbtn right button'">结束旅程</button>
         </ul>
         <ul class="listitem h100 mt20">
              <li class="itemcon_h lh3 mtb"><a href="javascript:void(0);">邀请好友参加</a></li>
              <li class="itemico_wechat mtb"><img src="../imgv2/pengyouquan.png" class="mr30 icosize60"/><img src="../imgv2/wechat.png" class="icosize60"/></li>
         </ul>
    </section>
    <section class="subtitle">
         <li class="left mt10 mb10">已参加好友<em class="friends-count">0</em> 人</li>
         <li class="right mt10 mb10">
             <button id="btnChangeLeader" class="subbtn left mr20 button" onClick="this.className='button_d subbtn left mr20'" onmouseout="this.className='subbtn left mr20 button'">更换领队</button>
             <button id="btnExit" class="subbtn left button" onClick="this.className='button_d subbtn left'" onmouseout="this.className='subbtn left button'">完成</button>
         </li>
    </section>
    <section class="citylist">
         <ul class="listitem mt20 friends-list" data-column="friendslist">
              <div class="usergroup mr15">
                <div class="picsize"><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div> 
         </ul>
         <!--  <ul class="listitem mt20">
           <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
             <div class="usergroup mr15">
                <div class="picsize"><div class="delbtn"><a href="javascript:void(0);"><img src="../imgv2/delbtn.png" width="100%" height="100%"/></a></div><img src="../imgv2/user_pic.png" width="100%" height="100%"/></div>
                <div class="name">James</div>
             </div>
         </ul> --> 
    </section>
    <section class="bottombtnarea">
         <ul class="listitem h60">
              <button id="btnStartJourney" class="bigbtn button" onClick="this.className='button_d bigbtn'" onmouseout="this.className='bigbtn button'"><i class="iconfont mr10 btnico">&#xe605;</i>开始旅程</button>
         </ul>
    </section>
</section>
<div class="iframe-containter"></div>
<!--wrap end-->
</body><script src="../jsv2/jQuery/jquery-1.11.2.min.js"></script>
<script src="../jsv2/common.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="../jsv2/QueryStringParser.js"></script>
<script src="../jsv2/lib/json3.min.js"></script>
<script src="../jsv2/jsonMsg.js"></script>
<script src="../jsv2/journey/operateData.js"></script>
<script src="../jsv2/AMapCommon.js"></script>
<script>
		var selectUserCount = 0,tripData,
			openId, tripId, isActive;
		$(function() {
			openId = queryString.getParam("openid");
			tripId = queryString.getParam("tripid");
			isActive = queryString.getParam("isActive");
			if (tripId.indexOf("#") > -1) {
				tripId = tripId.replace("#", "");
			}
			/*if (openId == null || openId == "" || tripId == null || tripId == "") {
				alert("参数错误...");
				window.location.href = "add.html?openid=" + openId;
				return false;
			} else {*/
			//retrieveFriends()
			retrieveTrip(tripId);
			//}
			$(document).on('click', '.photo-img', function(e) {
				var tar = $(e.target);
				tar.hasClass('img-selected') ? tar.removeClass('img-selected') : tar.addClass('img-selected');
				selectUserCount++;
				setBtnExitCanClick();
			});
			$('.photo-img-marker').on('click', function(e) {
				var tar = $(e.target);
				$('.photo-img', tar.parent()).removeClass('img-selected');
				selectUserCount--;
				setBtnExitCanClick();
			});
			setBtnExitCanClick();
			//修改旅程
			$('#btnChangeJourney').on('click', function() {
				setIframeSrc('add.html?isedit=1&isActive=' + isActive + '&openid=' + openId + '&tripid=' + tripId);
			});
			$('#btnChangeLeader').on('click', function() {
				setIframeSrc('changeLeader.html?openid='+openId+'&tripid=' + tripId);
			});
			$('#btnEndJourney').on('click', function() {
				updateTripStatus(tripId, 'Terminate');
			});
			$('#btnStartJourney').on('click', function() {
				updateTripStatus(tripId, 'Active');
			});
		});
		/**
		 * 设置清楚按钮是否可操作
		 */
		function setBtnExitCanClick() {
			if (selectUserCount > 0) {
				$('#btnExit').removeAttr('disabled').on('click', function() {});
			} else {
				$('#btnExit').off('click').attr({
					'disabled': 'disabled'
				});
			}
		}

		function retrieveTrip(tripId) {
			var dataStr = {
				"TripID": tripId
			};
			bidgeToWeixin(openId, 'TripDetail', dataStr, function(data, status, xhr) {
				var tripOwnerName = "",
					tripMember = "",
					data = data.portalResp.Data;
				tripData=data;
				$("#txtJourneyDestination").html(data.Destination.Name);
				$('.friends-count').html(data.MemberStatus.length);
				//$(".title.friends").html("<i class=\"iconfont tool_ico\">&#xe609;</i>参与人数：" + data.MemberStatus.length + "人");
				$("#txtJourneyStartTime").html((data.StartDate||data.ValidDate).replace(/年|月/g, '-').replace('日', ''));
				$("#txtJourneyEndTime").html(data.ValidDate.replace(/年|月/g, '-').replace('日', ''));
				var lis=[];				
				$.each(data.MemberStatus, function(index) {
							/*lis.push($('<li>').data('user', data.MemberStatus[index]).attr({'OpenID':data.MemberStatus[index].OpenID}).append($('<img>').attr({
									'src':data.MemberStatus[index].ImageURL
								}).addClass('photo-img ' + (data.TripLeader == data.MemberStatus[index].OpenID ? ' user-leader ' : '')+ (data.MemberStatus[index].TripMemberStatus == "-1" ? ' off-line ' : '')))
								.append($('<span>').addClass('photo-img-marker'))
								.append($('<span>').html(data.MemberStatus[index].Nickname)));*/

					lis.push($('<div>').addClass('usergroup mr15').data('user', data.MemberStatus[index]).attr({'OpenID':data.MemberStatus[index].OpenID})
								.append($('<div>').addClass('picsize').append($('<img>').attr({'src':data.MemberStatus[index].ImageURL,'width':"100%", 'height':"100%"})))
								.append($('<div>').addClass('name').html(data.MemberStatus[index].Nickname))
							);
					if (openId == data.MemberStatus[index].OpenID) {
						$('#owner-name').html(data.MemberStatus[index].Nickname);
						$('.td1 img').attr({'src':data.MemberStatus[index].ImageURL});
					}
				});
				$("ul[data-column=friendslist]").append(lis);
				//$(".address-detail-title").html(tripOwnerName + "创建了");
				$('#trip-title').html(data.Title);
				fillWXContent(data.Title);
			});
		}

		function fillWXContent(tripTitle) {
			var pageURL = location.href.split('#')[0];
			var dataStr = {
				PageURL: pageURL
			};
			bidgeToWeixin(openId, 'JSSignature', dataStr, function(data, status, xhr) {
				var timestamp = data.portalResp.Data.timestamp;
				var noncestr = data.portalResp.Data.noncestr;
				var signature = data.portalResp.Data.signature;
				var appId = data.portalResp.Data.appId;
				wx.config({
					debug: false,
					appId: appId,
					timestamp: timestamp,
					nonceStr: noncestr,
					signature: signature,
					jsApiList: [
						'hideOptionMenu',
						'showOptionMenu',
						'onMenuShareAppMessage'
					]
				});
				wx.ready(function() {
					wx.hideOptionMenu();
					// 2. 分享接口
					// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
					document.querySelector('#onMenuShareAppMessage').onclick = function() {
						document.getElementById("pop").style.display = "";
						wx.showOptionMenu();
						wx.onMenuShareAppMessage({
							title: '旅程邀请',
							desc: '您的好友' + ownerName + '邀请您加入' + tripTitle + '之旅。',
							link: "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + encodeURIComponent(pageURL.substring(0, pageURL.lastIndexOf("/")) + "/oauthServlet?type=2&openid=" + openId + "&tripid=" + tripId) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect",
							imgUrl: imageURL,
							trigger: function(res) {
								//alert('用户点击发送给朋友');
							},
							success: function(res) {
								document.getElementById("pop").style.display = "none";
								alert('已邀请');
							},
							cancel: function(res) {
								alert('已取消');
							},
							fail: function(res) {
								alert(JSON.stringify(res));
							}
						});
					};
					var shareData = {
						title: '微信JS-SDK Demo',
						desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
						link: 'http://demo.open.weixin.qq.com/jssdk/',
						imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
					};
					wx.onMenuShareAppMessage(shareData);
				});
				wx.error(function(res) {
					alert(res.errMsg);
				});
			});
		}
		function changeTripLeader(oid){
			tripData.TripLeader=oid;
			bidgeToWeixin(openId, 'EditTrip', tripData, function(data, status, xhr) {
			});
			//更新领队
			$('.friends-list li').each(function(){
				var tar=$(this),opid=tar.attr('OpenID');
				$('img',tar).removeClass('user-leader');
				if(opid==oid){
					$('img',tar).addClass('user-leader');
					}
				});
			}
	</script>
</html>